<template>
  <el-container class="bg_img1">
    <el-main class="bg_size1">
      <h1 class="ZC">修改登录头像</h1>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
        label-position="left"
        label-width="120px"
      >
        <el-row>
          <el-col :span="8" :offset="8">
            <el-upload
              class="avatar-uploader"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6" :offset="9" class="msg">
            <span>{{ msg }}</span>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="2" :offset="8">
            <el-form-item>
              <el-button
                type="primary"
                size="large"
                plain
                v-on:click="confirm()"
                >确认修改</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>

// import { ref } from 'vue'
// import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'

// import type { UploadFile } from 'element-plus'

// const dialogImageUrl = ref('')
// const dialogVisible = ref(false)
// const disabled = ref(false)

// const handleRemove = (file: UploadFile) => {
//   console.log(file)
// }

// const handlePictureCardPreview = (file: UploadFile) => {
//   dialogImageUrl.value = file.url!
//   dialogVisible.value = true
// }

// const handleDownload = (file: UploadFile) => {
//   console.log(file)
// }

export default {
  name: "EditTouXiangVue",
  data() {
    return {
      ruleForm: {
        password: "111111",
        newpassword: "111111",
        commitpassword: "111111",
      },
      rules: {
        newpassword: {
          required: true,
          min: 6,
          max: 10,
          message: "长度在 6 到 10 个字符",
          trigger: "blur",
        },
        commitpassword: {
          required: true,
          message: "确认密码不能为空",
          trigger: "blur",
        },
      },
      msg: "",
    };
  },
  methods: {
    confirm() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          console.log("ccc", this.ruleForm);
        }
      });
    },
  },
};

</script>


<style scoped>
.ZC {
  font-size: 30px;
  margin-left: 40%;
  color: rgb(150, 172, 192);
}
.msg {
  color: red;
  margin-bottom: 15px;
}



/* 上传框 */
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: 1px #007dff solid;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #007dff;
  width: 178px;
  height: 178px;
  /* text-align: center; */
  border: 3px #007dff dashed;
  margin-left: 70px;
}
</style>